<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>03_新增列表标签</title>
  </head>
  <body>
    <form action="#">
      <input type="text" list="mydata" />
      <button>搜索</button>
    </form>
    <!-- datalist 标签 配合id以及input的list属性使用-->
    <datalist id="mydata">
      <option value="前端">前端</option>
      <option value="后端">后端</option>
      <option value="大模型">大模型</option>
      <option value="人工智能">人工智能</option>
    </datalist>

    <!-- details 标签 配合summary标签使用 -->
    <details>
      <summary>问：前端开发需要学习哪些东西？</summary>
      <div>
        <p>答：</p>
        <p>HTML CSS</p>
        <p>Javascript</p>
        <p>Node.js</p>
        <p>React</p>
        <p>Vue</p>
      </div>
    </details>
  </body>
</html>
